<template>
	<div class="question">
		<div class="content-div">
			<Row style="margin-top:10px">
				<Col span="14" class="table-form-input-select-col">
					<span class="alltitle" style="line-height:30px"><router-link to="项目列表"> 项目列表</router-link> > 外部雇主调研板块</span>
				</Col>
				<Col span="3" offset="7">
					<Button type="primary" @click="addNewQestion">增加调研问卷</Button>
				</Col>				
			</Row>
		</div>
		<div class="content-div" style="margin-top:10px">
			<Table border stripe :columns="columns" :data="data" ref="table" style="overflow: visible"></Table>
		</div>
		<div class="content-div" align="center">
			<Page @on-change="changepage" 
				:total="pageData.total" 
				:current="pageData.current" 
				:page-size="pageData.pageSize" 
				style="padding:5px 5px 2px 5px;" 
				show-elevator>
			</Page>
		</div>
		<Modal class="modelEdit" v-model="editQuestion" width="900" :mask-closable="false" title="编辑问答" @on-ok="okEdit('editData')">
            <Form ref="editData" :model="editData" :rules="ruleformData" inline>
                <FormItem label="标题" :label-width="100" prop="title">
                    <Input class="input-item" placeholder="输入标题" v-model="editData.title"></Input>
                </FormItem>
                <FormItem label="说明描述" :label-width="100" prop="memo">
                    <Input :rows="2" type="textarea" placeholder="输入说明描述" v-model="editData.memo" style="width:700px;margin-left:45px"></Input>
                </FormItem>
            </Form>
        </Modal>
        <Modal class="modelEdit" v-model="addQuestion" width="900" :mask-closable="false" title="新增问答" @on-ok="okAdd('formData')">
            <Form ref="formData" :model="formData" :rules="ruleformData" inline>
                <FormItem label="标题" :label-width="100" prop="title">
                    <Input class="input-item" placeholder="输入标题" v-model="formData.title"></Input>
                </FormItem>
                <FormItem label="说明描述" :label-width="100" prop="memo">
                    <Input :rows="3" type="textarea" placeholder="输入说明描述" v-model="formData.memo" style="width:700px;margin-left:45px"></Input>
                </FormItem>              
            </Form>
        </Modal>
	</div>
</template>
<script>
export default {
    data() {
        return {
        	pageData: {
                    current: 1,
                    total: 1,
                    pageSize: 20
                },
            data: [],
            editQuestion: false,
            addQuestion: false,
            formData: {
            	title: '',
            	memo: ''
            },
            editData: {},
            ruleformData: {
            	title: [{
            		required: true,
            		type: "string",
            		message: "请输入标题",
            		trigger: "change"
            	}],
            	memo: [{
            		required: true,
            		type: "string",
            		message: "请输入说明描述",
            		trigger: "change"
            	}]
            },
        	columns: [{
        		title: "标题",
        		key: "title",

        	}, {
        		title: "说明描述",
        		key: "memo",

        	}, {
        		title: "使用开启",
        		key: "is_running",
        		width: 150,
        		render: (h, params) => {
        			return h("Select", {
        					props: {
        						value: this.data[params.index].is_running
        					},
        					on: {
                                "on-change": (val) => {
                                	this.data[params.index].is_running = val
                                    this.changeRunning(params.index)
                                }
                            }
        				}, [
        					h("Option", {
        						props: {
        							value: "1"
        						}
        					}, "开启"),
        					h("Option", {
        						props: {
        							value: "0"
        						}
        					}, "关闭"),
        			])
        		}
        	}, {
        		title: "操作",
        		key: "operate",
        		width: 150,
        		render: (h, params) => {
                        return h("div", [
                        	h(
                                "span", {
                                    style: {
                                        textDecoration: "underline",
                                        color: "#4b80fd",
                                        cursor: "pointer"
                                    },
                                    on: {
                                        click: () => {  
                                            let ques = this.data[params.index];                                      	
                                            this.$router.push({ name: 'questionmgr', params: { qid: ques.id }})
                                        }
                                    }
                                },
                                "问卷管理"
                            ),
                            h(
                                "span", {
                                    style: {
                                        textDecoration: "underline",
                                        color: "#4b80fd",
                                        cursor: "pointer",
                                        'margin-left': "5px",
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index);
                                        }
                                    }
                                },
                                "编辑"
                            ),
                            // h(
                            //     "span", {
                            //         style: {
                            //             textDecoration: "underline",
                            //             color: "#4b80fd",
                            //             cursor: "pointer",
                            //             'margin-left': "5px",
                            //         },
                            //         on: {
                            //             click: () => {
                                            
                            //             }
                            //         }
                            //     },
                            //     "删除"
                            // )
                        ]);
                    }
        	}]
        }
    },
    methods: {
    	addNewQestion() {
    		this.addQuestion = true;
    	},
    	changepage(currentPage) {
            if (isNaN(currentPage)) {
                    currentPage = 1
                }
                var self = this

                var poid = localStorage.pid;
                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnairelist&pagesize=20&id=" + poid + "&pageindex=" + currentPage,
                    type: "POST",
                    dataType: "json",
                    success: function(data) {

                        console.log(data);

                        if (data.data != null) {

                            self.data = data.data
                            self.pageData.total = parseInt(data.datatotal)
                            self.pageData.pageSize = 20
                            self.pageData.current = currentPage

                        } else {

                            self.$Message.error('没有问卷');

                        }

                    }
                });
    	},
        show(index) {
            this.editQuestion = true;

            this.editData = this.data[index];
            console.log(this.editData)
        },
        changeRunning(index) {
            var poid = localStorage.pid;
            var ques = this.data[index];
            var self = this
            $.ajax({
                url: " https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnaireedit&id=" + ques.id,
                data: {
                    "title": ques.title,
                    "memo": ques.memo,
                    "is_running": ques.is_running
                },
                type: "POST",
                dataType: "json",
                success: function(data) {
                    console.log(data);

                    if (data.code == 1) {
                        console.log(data);
                        self.$Message.success('操作成功!')                        
                    }
                }
            });
        },
    	okEdit(name) {
            var poid = localStorage.pid;
                console.log(this.formData.id);
                this.$refs[name].validate(valid => {
                    if (valid) {
                        var self = this
                        $.ajax({
                            url: " https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnaireedit&id=" + self.editData.id,
                            data: {
                                "title": self.editData.title,
                                "memo": self.editData.memo,
                                "is_running": self.editData.is_running
                            },
                            type: "POST",
                            dataType: "json",
                            success: function(data) {
                                console.log(data);

                                if (data.code == 1) {
                                    console.log(data);
                                    self.$Message.success('提交成功!')
                                    self.changepage(1);
                                }
                            }
                        });

                    } else {
                        this.$Message.error("编辑失败！");
                    }
                });
    	},
    	okAdd(name) {
            var poid = localStorage.pid;
                this.$refs[name].validate(valid => {
                    if (valid) {
                        var self = this
                        console.log(self.formData.title)

                        $.ajax({
                            url: " https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnairecreate&id=" + poid,
                            data: {
                                "title": self.formData.title,
                                "memo": self.formData.memo,
                                "is_running": 0
                            },
                            type: "POST",
                            dataType: "json",
                            success: function(data) {
                                console.log(data);

                                if (data.code == 1) {
                                    console.log(data);
                                    
                                    self.$Message.success('提交成功!')
                                    self.changepage(1);
                                }
                            }
                        });

                    } else {
                        this.$Message.error("添加失败");
                    }
                });
                console.log(this.formData2);
    	}
    },
    created() {
            var poid = localStorage.pid;
            console.log(localStorage.pid)
            var self = this
            $.ajax({
                url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnairelist&pagesize=20&id=" + poid,
                type: "POST",
                dataType: "json",
                success: function(data) {

                    console.log(data);

                    if (data.data != null) {

                        self.data = data.data
                        self.pageData.total = parseInt(data.datatotal)
                        self.pageData.pageSize = 20
                        self.pageData.current = 1

                    } else {

                        self.$Message.error('没有问卷');

                    }

                }
            });
        }
};
</script>
<style>
.input-item {
    margin-left: 45px;
    width: 250px;
}

.input-item2 {
    margin-left: 45px;
    width: 275px;
}

.formitem {
    margin-left: 30px;
}
</style>